

import { Component, director, EventTouch, Label, Node, Rect, Size, tween, UITransform, v3, Vec2, view, _decorator } from "cc";
import { App } from "../../App";
import { TouchNode } from "./TouchNode";

interface ItemData{
	node:Node,
	idx:number,
	data:any
}

const { menu, ccclass, property, disallowMultiple } = _decorator;
@ccclass
@disallowMultiple
@menu("自定义插件/下拉列表框")
export default class ComboBox extends Component {
	@property({ type: Node, tooltip: '三角形' })
	triangle: Node = null;
	@property({ type: Node, tooltip: '下拉列表内容框' })
	content: Node = null;
	@property({ type: Label, tooltip: '展示选项文本' })
	lblText: Label = null;

	private _isDropDown: boolean = false;
	private _callBack:(index:number,userData:any)=>void = null;
	private _maskNode:Node = null;

	onLoad() {
		this.content.active = false;
		
		!this.content.getComponent(UITransform) && this.content.addComponent(UITransform);
		const _TouchNode = this.addComponent(TouchNode);
		_TouchNode.zoomScale = this.node.scale.x;
		_TouchNode.bindClicket(this.node,'ComboBox','onDropDownClicked');
		this._maskNode = new Node('MaskRect');
		//this._maskNode.addComponent(BlockInputEvents);// 此行代码会导致无法选择列表项
		this._maskNode.on(Node.EventType.TOUCH_END, this._onTouchEnd, this);
	}

	onDestroy(){
		this._maskNode.off(Node.EventType.TOUCH_END, this._onTouchEnd);
	}

	public setData(datas:ItemData[],cb:(index:number,data:string)=>void) {
        if (!datas || datas.length < 1) return ;

		this._callBack = cb;
		this.content.removeAllChildren();
        datas.forEach((it)=>{
			it.node.parent = this.content;
			let touch = it.node.getComponent(TouchNode);
			!touch && (touch = it.node.addComponent(TouchNode));
			touch.zoomScale = 1;
			touch.bindClicket(this.node,'ComboBox','onSelectClicket',JSON.stringify({idx:it.idx,data:it.data}));
        });
	}

	onSelectClicket(_,customEventData:string){
		this.lblText && (this.lblText.string = customEventData);
		if (this._callBack){
			const custom = JSON.parse(customEventData);
			this._callBack(custom.idx,custom.data);
		}
		this.onDropDownClicked();
	}

	// 更新 Items
	updateItems() {
	}

	// 设置下标
	setIndex(txt:string,index?: number) {
		this.lblText && (this.lblText.string = txt || '');
	}

	// 下拉框显示与隐藏
	onDropDownClicked() {
		this.content.active = this._isDropDown = !this._isDropDown;
		if (!App.isInvalid(this.triangle)){
			tween(this.triangle)
			.to(0.5,{angle:this._isDropDown ? 180:270},{easing:'cubicIn'})
			.call(()=>{tween(this.triangle).stop()})
			.start();
		}

		this._maskNode.parent = null;
		if (this._isDropDown){
			const size:Size = view.getVisibleSize();
			this._maskNode.addComponent(UITransform).contentSize = size;
			this._maskNode.setPosition(v3(size.width*0.5,size.height*0.5,0));
			this._maskNode.active = true;
			director.getScene().addChild(this._maskNode);
		} else {
			this._maskNode.active = false;
		}
	}

	private _onTouchEnd(event: EventTouch){
		const location:Vec2 = event.touch.getLocation();
		const ui:UITransform = this.content.getComponent(UITransform);
		const rect:Rect = ui.getBoundingBoxToWorld();
		if (ui.getBoundingBoxToWorld().contains(location)){
			// @ts-ignore
			this._maskNode._touchListener.setSwallowTouches(false);
			return ;
		}
		this.onDropDownClicked();

	}
}